<template>
    <Card :bordered="false" dis-hover>
        <div>
            <Form class="ivu-mb-16 ivu-pt-8">
                <DatePicker :editable="false"
                            v-width="200"
                            type="daterange"
                            placeholder="请选择拨号日期"
                            format="yyyy-MM-dd"
                            @on-change="changeTime"
                            :options="options"
                            v-model="params.time"
                />
                <Input
                    class="ivu-ml-8"
                    v-width="260"
                    placeholder="请输入设备别名、手机号"
                    v-model="params.keyword"
                    @on-enter="keywordEv"
                    clearable
                    @on-clear="clearKeyword"
                />
                <Select
                    class="ivu-ml-8"
                    v-width="150"
                    placeholder="请选择呼叫类型"
                    clearable
                    @on-change="changeType"
                    v-model="params.type"
                >
                    <Option
                        v-for="item in typeList"
                        :value="item.value"
                        :key="item.value"
                    >{{ item.label }}</Option
                    >
                </Select>
                <!-- <Select
          class="ivu-ml-8"
          v-model="params.call"
          v-width="150"
          placeholder="请选择通话状态"
          @on-change="changeStatus"
          clearable
        >
          <Option
            v-for="item in statusList"
            :value="item.name"
            :key="item.name"
            >{{ item.label }}</Option
          >
        </Select> -->
                <Select
                    class="ivu-ml-8"
                    v-width="150"
                    placeholder="请选择设备归属人"
                    clearable
                    @on-change="getData"
                    v-model="params.accountid"
                >
                    <Option
                        v-for="item in member_list"
                        :value="item.value"
                        :key="item.value"
                    >{{ item.label }}</Option
                    >
                </Select>
            </Form>
        </div>
        <div>
            <Table highlight-row
                   :max-height="635"
                   :columns="columns"
                   :data="list"
                   :loading="loading"
                   @on-sort-change="sortchange"
                   border
            >
                <template slot="type" slot-scope="{ row }">
                    <Tag v-if="row.type === '1'" color="volcano">呼入</Tag>
                    <Tag v-if="row.type === '2'" color="cyan">呼出</Tag>
                    <Tag v-if="row.type === '3'" color="blue">未接</Tag>
                    <Tag v-if="row.type === '4'" color="geekblue">语音留言</Tag>
                    <Tag v-if="row.type === '5'" color="orange">挂断</Tag>
                </template>
                <!-- <template slot="is_call" slot-scope="{ row }">
          <Badge v-if="row.is_call === '1'" status="success" text="发送" />
          <Badge v-if="row.is_call === '0'" status="warning" text="接收" />
        </template> -->
                <template slot="action" slot-scope="{ row }">
                    <div v-if="row.is_call === '1'">
                        <a @click="handleSound(row)">听录音</a>
                        <Divider type="vertical" />
                        <!-- <a href="" :download="row.file_url">下载</a> -->
                        <a @click="downloadurlFile(row.file_url)">下载</a>
                    </div>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                    :total="total"
                    :current.sync="params.page"
                    show-elevator
                    show-sizer
                    show-tota
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                />
            </div>
        </div>
        <Modal
            title="听录音"
            v-model="sound"
            :mask-closable="false"
            width="360"
            footer-hide
            @on-cancel="cancel"
        >
            <audio :src="musicurl" controls id="audio" v-if="musicurl != ''"></audio>
            <div v-else>暂无录音</div>
            <div v-if="musicurl != ''" style="margin-top:10px">
                播放倍速：
                <RadioGroup v-model="model1" @on-change="changeaudio(model1)">
                    <Radio :label="item.id" v-for="item in RadioGroup" :key="item.id">{{
                        item.name
                    }}</Radio>
                </RadioGroup>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import { getVoice } from '@/api/TApi/index.js';
    export default {
        name: 'call',
        data () {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() >= new Date();
                    }
                },
                model1: 1,
                sound: false,
                typeList: [],
                musicurl: '',
                RadioGroup: [
                    { id: 0.5, name: '0.5' },
                    { id: 0.75, name: '0.75' },
                    { id: 1, name: '1.0' },
                    { id: 1.5, name: '1.5' },
                    { id: 1.75, name: '1.75' },
                    { id: 2, name: '2.0' }
                ],
                statusList: [],
                loading: false,
                params: {
                    page: 1,
                    pageSize: 10,
                    type: '',
                    // call: "",
                    keyword: '',
                    time: '',
                    accountid: '',
                    order_colum: 'duration',
                    order_sort: ''
                },
                total: 0,
                columns: [
                    {
                        title: '设备别名',
                        key: 'nickname',
                        width: 160,
                        tooltip: true,
                        fixed: 'left'
                    },
                    {
                        title: '来电号码',
                        key: 'mobile',
                        minWidth: 160
                    },
                    {
                        title: '拔号时间',
                        key: 'call_time',
                        minWidth: 180
                    },
                    {
                        title: '通话时长',
                        key: 'duration',
                        sortable: 'custom',
                        minWidth: 130
                    },
                    {
                        title: '呼叫类型',
                        slot: 'type',
                        minWidth: 100
                    },
                    // {
                    //   title: "通话状态",
                    //   slot: "is_call",
                    //   minWidth: 100,
                    // },
                    {
                        title: '设备归属人',
                        key: 'account',
                        minWidth: 118
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        width: 128
                    }
                ],
                list: [],
                member_list: []
            };
        },

        methods: {
            // 切换分页
            changePage (value) {
                this.params.page = value;
                this.getData();
            },
            clearKeyword () {
                if (JSON.stringify(this.storage.get('robot-call')) !== JSON.stringify(['', ''])) {
                    this.params.time = this.storage.get('robot-call');
                }
                this.getData();
            },
            sortchange (e) {
                this.params.order_sort = e.order;
                this.getData();
            },
            changeaudio (model1) {
                const audio = document.getElementById('audio');
                audio.playbackRate = model1;
            },
            cancel () {
                const audio = document.getElementById('audio');
                if (this.musicurl !== '') {
                    audio.pause();
                }
                this.model1 = 1;
                this.musicurl = '';
            },
            changePageSize (value) {
                this.params.pageSize = value;
                this.params.page = 1;
                this.getData();
            },
            keywordEv () {
                if (JSON.stringify(this.params.time) !== JSON.stringify(['', ''])) {
                    let timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'), this.$Date(this.params.time[1]).format('YYYY-MM-DD')];
                    this.storage.set('robot-call', timer);
                    this.params.time = ['', ''];
                }
                this.params.type = '';
                this.params.accountid = '';
                this.params.order_sort = '';
                this.params.page = 1;
                this.getData();
            },
            // 切换时间
            changeTime (value) {
                this.params.page = 1;
                this.params.time[0] = value[0] === '' ? '' : value[0] + ' 00:00:00';
                this.params.time[1] = value[1] === '' ? '' : value[1] + ' 23:59:59';
                let timer = ['', ''];
                if (JSON.stringify(this.params.time) !== JSON.stringify(['', ''])) {
                    timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'), this.$Date(this.params.time[1]).format('YYYY-MM-DD')];
                }
                this.storage.set('robot-call', timer);
                this.getData();
            },
            // 切换类型
            changeType (value) {
                if (!value) {
                    this.params.type = '';
                }
                this.params.page = 1;
                this.getData();
            },
            changeStatus () {
                this.params.page = 1;
                this.getData();
            },
            getData () {
                this.loading = true;
                let params = JSON.parse(JSON.stringify(this.params));
                delete params.time;
                params.start_time = this.params.time[0] ? this.params.time[0] : '';
                params.end_time = this.params.time[1] ? this.params.time[1] : '';
                getVoice(params).then((res) => {
                    this.typeList = res.type;
                    this.statusList = res.call;
                    this.list = res.list.list;
                    this.total = res.list.total;
                    this.member_list = res.member_list;
                    this.loading = false;
                });
            },
            handleSound (data) {
                this.musicurl = data.file_url;
                this.sound = true;
            },
               // 下载音频
            downloadurlFile (url) {
                fetch(url).then(res => {
                    // console.log(res, 'res')
                    res.blob().then(myBlob => {
                        const href = URL.createObjectURL(myBlob);
                        const a = document.createElement('a');
                        a.href = href;
                        a.download = this.getFileName(url); // 下载文件重命名
                        a.click();
                        a.remove();
                    });
                });
            },
            /**
             * 根据文件url获取文件名
             * @param url 文件url
             */
            getFileName (url) {
                var num = url.lastIndexOf('/') + 1;
                var fileName = url.substring(num);
                // 把参数和文件名分割开
                fileName = decodeURI(fileName.split('?')[0]);
                return fileName;
            }
        },
        mounted () {
            this.storage.set('robot-call', ['', '']);
            this.getData();
        }
    };
</script>
